<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    
    // --- Style and Configuration ---
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    ctx.font = "20px Times New Roman";
    
    // --- Key Coordinates ---
    const lensCenterX = 250;
    const intersectionPoint = { x: lensCenterX, y: 165 };
    const leftBoundaryX = 50;
    const rightBoundaryX = 450;

    // --- Drawing Functions ---

    /**
     * Draws a line segment from a start point to an end point.
     * @param {object} start - The start point {x, y}.
     * @param {object} end - The end point {x, y}.
     */
    function drawLine(start, end) {
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.lineTo(end.x, end.y);
        ctx.stroke();
    }
    
    /**
     * Draws a left-pointing arrow in the middle of a line segment.
     * @param {object} start - The start point {x, y}.
     * @param {object} end - The end point {x, y}.
     */
    function drawLeftArrow(start, end) {
        const midX = (start.x + end.x) / 2;
        const midY = (start.y + end.y) / 2;
        const angle = Math.atan2(end.y - start.y, end.x - start.x);
        const headlen = 10;
        
        ctx.beginPath();
        ctx.moveTo(midX, midY);
        ctx.lineTo(midX - headlen * Math.cos(angle - Math.PI / 6), midY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(midX, midY);
        ctx.lineTo(midX - headlen * Math.cos(angle + Math.PI / 6), midY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Draw Main Components ---

    // Draw the converging lens
    ctx.beginPath();
    ctx.ellipse(lensCenterX, 185, 20, 150, Math.PI / 2, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the dashed principal axis
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(leftBoundaryX, 260);
    ctx.lineTo(rightBoundaryX, 260);
    ctx.stroke();
    ctx.setLineDash([]);

    // --- Draw Rays and Labels ---
    // The diagram shows all rays as straight lines passing through a single point on the lens axis.
    // All arrows indicate light traveling from right to left.

    // Ray B (incident) and Ray C (refracted)
    const rayBC_y = 115;
    const startB = { x: rightBoundaryX, y: rayBC_y };
    const endC = { x: leftBoundaryX, y: rayBC_y };
    drawLine(startB, intersectionPoint);
    drawLine(intersectionPoint, endC);
    drawLeftArrow(startB, intersectionPoint);
    drawLeftArrow(intersectionPoint, endC);
    ctx.fillText("B", 420, 110);
    ctx.fillText("C", 80, 110);
    
    // Central Ray: "incident ray" and Ray D
    const centralRay_y = 165;
    const startCentral = { x: rightBoundaryX, y: centralRay_y };
    const endD = { x: leftBoundaryX, y: centralRay_y };
    drawLine(startCentral, endD); // This line passes through the intersection point
    drawLeftArrow(startCentral, intersectionPoint);
    drawLeftArrow(intersectionPoint, endD);
    ctx.fillText("incident ray", 320, 160);
    ctx.fillText("D", 80, 160);
    
    // Ray for A (refracted) and its corresponding incident ray
    const rayA_y = 280;
    const startA_inc = { x: rightBoundaryX, y: rayA_y };
    const endA = { x: leftBoundaryX, y: rayA_y };
    drawLine(startA_inc, intersectionPoint);
    drawLine(intersectionPoint, endA);
    drawLeftArrow(startA_inc, intersectionPoint);
    drawLeftArrow(intersectionPoint, endA);
    ctx.fillText("A", 80, 290);
    
    // Ray for E (refracted) and its corresponding incident ray
    const rayE_y = 215;
    const startE_inc = { x: rightBoundaryX, y: rayE_y };
    const endE = { x: leftBoundaryX, y: rayE_y };
    drawLine(startE_inc, intersectionPoint);
    drawLine(intersectionPoint, endE);
    drawLeftArrow(startE_inc, intersectionPoint);
    drawLeftArrow(intersectionPoint, endE);
    ctx.fillText("E", 80, 210);

</script>
</body>
</html>